<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>

<body>
    <div id="app">
        <label>FirstName: </label><input type="text" v-model="firstName"> <br>
        <label>LastName: </label><input type="text" v-model="lastName"> <br>
        <label>FullName: </label><input type="text" v-model="fullName">
    </div>

    <script type="module">
        import Vue from '../vue.esm.browser.js'

        const app = new Vue({
            el: '#app',
            data: {
                firstName: 'Foo',
                lastName: 'Bar', 
            },
            computed: {
                fullName: {
                    get: function() {
                        return this.firstName + ' ' + this.lastName
                    },
                    set: function(newValue) {
                        let names = newValue.split(' ')

                        this.firstName = names[0]
                        this.lastName = names[1]
                    }
                }
            }
        })
    </script>
</body>

</html>